import React, { FC, useEffect, useState } from 'react'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { TableItem } from './TableItem'
import { THeader } from './THeader'
import { Wrap } from './style'
import { TableEmpty } from '../../../../components'
import { useTableLiveStore } from './store'
import { LiveModel } from '@/api/manager/live/interface'

interface RowRendererProps extends ListChildComponentProps {
	data: LiveModel[]
}
const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const isOdd = index % 2 ? true : false
	return <TableItem style={style} rowData={rowData} isOdd={isOdd} />
})
export const TableLive: FC<{ isOrganize: boolean }> = ({ isOrganize }) => {
	const [list, setList] = useState<LiveModel[]>([])
	const _list = useTableLiveStore((state) => state.list)

	useEffect(() => {
		const l = _list.filter((x) => x.status.isMatchSearch)
		setList(l)
	}, [_list])

	return (
		<Wrap isOrganize={isOrganize}>
			{list.length > 0 ? (
				<>
					<THeader></THeader>
					<div className="table-body">
						<AutoSizer>
							{({ width, height }) => (
								<List
									width={width}
									height={height}
									itemCount={list.length}
									itemSize={30}
									itemData={list}
								>
									{rowRenderer}
								</List>
							)}
						</AutoSizer>
					</div>
				</>
			) : (
				<TableEmpty />
			)}
		</Wrap>
	)
}
